<template>
  <div class="whole wholeMenu">
    <div class="crumbs">
      <a-breadcrumb>
        <a-breadcrumb-item v-for="(item, index) in $route.matched" :key="index">
          <span v-if="index+1 < $route.matched.length">{{ item.meta.title }}</span>
          <router-link v-if="index+1 == $route.matched.length" :to="item.path">{{ item.meta.title }}</router-link>
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="addUser">
      <a-button :class="butAdmin" class="userAbut" type="primary" v-if="addShow" @click="addMenu">+ 添加菜单</a-button>
    </div>
    <a-table
      rowKey="id"
      :class="TableAdmin"
      class="menuTable"
      :columns="columns"
      :data-source="data"
      :expanded-row-keys.sync="expandedRowKeys"
      :pagination="pagination"
    >
      <template slot="operations" slot-scope="text, record">
        <div class="editable-row-operations">
          <span v-if="delShow">
            <a-popconfirm v-if="data.length" title="确认删除?" @confirm="() => Delete(record.id)">
              <a href="javascript:;" title="删除">
                <a-icon type="delete" style="color:red; fontSize:16px;" />
              </a>
            </a-popconfirm>
          </span>
          <span class="jiange"></span>
          <span v-if="editShow">
            <a href="javascript:;" @click="edit(record.id)" title="编辑">
              <a-icon type="edit" style="color:#7a7d7e; fontSize:16px;" />
            </a>
          </span>
        </div>
      </template>
      <span slot="num" slot-scope="text, record, index">
        {{
        (pagination.current - 1) * pagination.pageSize + parseInt(index) + 1
        }}
      </span>
    </a-table>
    <div class="Loading" v-show="Loading">
      <a-spin tip="Loading..."></a-spin>
    </div>
    <!-- 添加 -->
    <div class="aModalMenu" ref="aModalMenu">
      <a-modal
        v-model="addVisible"
        :maskClosable="false"
        centered
        :mask="false"
        :getContainer="()=>$refs.aModalMenu"
        title="添加菜单"
      >
        <template slot="footer">
          <a-button :class="TableButSave" class="butSave" @click="closeAddRole">添加</a-button>
          <a-button :class="TableButReset" @click="addReturnReset" class="butReset">重置</a-button>
        </template>

        <a-form
          hideRequiredMark
          class="addForm"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :form="form"
        >
          <a-form-item v-bind="formItemLayout" label="上级菜单" has-feedback>
            <a-cascader
              placeholder="请选择上级菜单"
              :options="higherMenu"
              :fieldNames="fieldNames"
              change-on-select
              v-decorator="[
            'residence',
            {
              rules: [],
            },
          ]"
            />
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="菜单名称">
            <a-input
              placeholder="请输入菜单名称"
              v-decorator="[
            'menuName',
            {
              rules: [
                {
                  required: true,
                  message: '请输入菜单名称',
                },
              ],
            },
          ]"
            />
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="菜单类型">
            <a-radio-group
              class="menuType"
              v-decorator="[
            'menuType',
            {
              rules: [
                {
                  required: true,
                  message: '请选择',
                },
              ],
            },
          ]"
            >
              <a-radio :value="1">目录</a-radio>
              <a-radio :value="2">菜单</a-radio>
              <a-radio :value="3">按钮</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="路由路径">
            <a-input
              placeholder="请输入路由路径"
              v-decorator="[
            'path',
            {
              rules: [
                {
                  required: true,
                  message: '请输入路由路径',
                },
              ],
            },
          ]"
            />
          </a-form-item>

          <a-form-item class="permsBs" v-bind="formItemLayout" label="权限标识">
            <a-input
              placeholder="请输入权限标识"
              v-decorator="[
            'perms',
            {
              rules: [
                {
                  required: true,
                  message: '请输入权限标识',
                },
              ],
            },
          ]"
            />
          </a-form-item>
          <!-- <div class="permsTs" @mousemove="shadowMousemove" @mouseout="shadowMouseout">
            <a-icon type="exclamation-circle" />
          </div>
          <div class="permsCase" v-show="permsShow">
            <span>新增: add</span>
            <span>删除: delelte</span>
            <span>编辑: edlt</span>
            <span>授权: impower</span>
            <span>使用模板: template</span>
            <span>导出: export</span>
          </div> -->

          <a-form-item v-bind="formItemLayout" class="numInp" label="显示顺序">
            <a-input-number
            :value="value"
              style="float: left"
              v-decorator="[
            'sortCode',
            {
              rules: [
                {
                  required: false,
                },
              ],
            },
          ]"
              id="inputNumber"
              :min="1"
              @change="handleNumberChange"
            />
          </a-form-item>
        </a-form>
      </a-modal>
    </div>

    <!-- 编辑 -->
    <div class="aModalMenu1" ref="aModalMenu1">
      <a-modal
        v-model="editVisible"
        :maskClosable="false"
        centered
        :mask="false"
        :getContainer="()=>$refs.aModalMenu1"
        title="编辑菜单"
      >
        <template slot="footer">
          <a-button :class="TableButSave" class="butSave" @click="closeEditRole">编辑</a-button>
          <a-button :class="TableButReset" @click="addReturnReset" class="butReset">重置</a-button>
        </template>

        <a-form
          hideRequiredMark
          class="addForm"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :form="form"
        >
          <a-form-item v-bind="formItemLayout" label="上级菜单" has-feedback>
            <!--  {initialValue: parentIds}, -->
            <a-cascader
              placeholder="请选择上级菜单"
              :options="higherMenu"
              :fieldNames="fieldNames"
              change-on-select
              v-decorator="[
            'residence',
            {
              rules: [],
            },
          ]"
            />
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="菜单名称">
            <a-input
              placeholder="请输入菜单名称"
              v-decorator="[
            'menuName',
            {
              rules: [
                {
                  required: true,
                  message: '请输入菜单名称',
                },
              ],
            },
          ]"
            />
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="菜单类型">
            <a-radio-group
              class="menuType"
              v-decorator="[
            'menuType',
            {
              rules: [
                {
                  required: true,
                  message: '请选择',
                },
              ],
            },
          ]"
            >
              <a-radio :value="1">目录</a-radio>
              <a-radio :value="2">菜单</a-radio>
              <a-radio :value="3">按钮</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="路由路径">
            <a-input
              placeholder="请输入路由路径"
              v-decorator="[
            'path',
            {
              rules: [
                {
                  required: true,
                  message: '请输入路由路径',
                },
              ],
            },
          ]"
            />
          </a-form-item>

          <a-form-item class="permsBs" v-bind="formItemLayout" label="权限标识">
            <a-input
              placeholder="请输入权限标识"
              v-decorator="[
            'perms',
            {
              rules: [
                {
                  required: true,
                  message: '请输入权限标识',
                },
              ],
            },
          ]"
            />
          </a-form-item>
          <!-- <div class="permsTs" @mousemove="shadowMousemove" @mouseout="shadowMouseout">
            <a-icon type="exclamation-circle" />
          </div>
          <div class="permsCase" v-show="permsShow">
            <span>新增: add</span>
            <span>删除: delelte</span>
            <span>编辑: edlt</span>
            <span>授权: impower</span>
            <span>使用模板: template</span>
            <span>导出: export</span>
          </div> -->

          <a-form-item v-bind="formItemLayout" class="numInp" label="显示顺序">
            <a-input-number
              style="float: left"
              v-decorator="[
            'sortCode',
            {
              rules: [
                {
                  required: false,
                },
              ],
            },
          ]"
              id="inputNumber"
              :min="1"
              @change="handleNumberChange"
            />
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </div>
</template>

<script>
const columns = [
  {
    title: "菜单名称",
    dataIndex: "menuName",
    key: "menuName",
    width: 150
  },
  {
    title: "权限标识",
    dataIndex: "perms",
    key: "perms",
    width: 200
  },
  {
    title: "排序",
    dataIndex: "sortCode",
    key: "sortCode",
    width: 200
  },
  {
    title: "操作",
    dataIndex: "operations",
    scopedSlots: { customRender: "operations" },
    width: 200
  }
];
import api from "../../api/MenuManagement/MenuManagement.js";
// 获取字符串中 指定字符的前面 与 后面
function getStr(string, str) {
    var str_before = string.split(str)[0];
    var str_after = string.split(str)[1];
    var obj = {
        goods: str_before,
        goods_id: str_after
    };
    return obj;
}
export default {
  data() {
    return {
      parentIds:[],
      addVisible: false,
      editVisible: false,
      xqId:'',
      data: [],
      columns,
      Loading: false,
      expandedRowKeys: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        pageSizeOptions: ["5", "10", "15", "20"],
        onShowSizeChange: current => this.onSizeChange(current),
        onChange: (current, pageSize) => this.onPageChange(current, pageSize)
      },
      addShow: false,
      delShow: false,
      editShow: false,
      routeTitle: [],
      permsShow: false,
      fieldNames: {
        value: "id",
        label: "menuName",
        children: "children"
      },
      higherMenu: [],
      value: 1,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0
          },
          sm: {
            span: 16,
            offset: 8
          }
        }
      },
      TableAdmin:'TableAdmin',
      butAdmin:'butAdmin',
      TableButSave:'TableButSave',
      TableButReset:'TableButReset',
      strPerms:'',
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "register" });
  },
  created() {
    this.getMenuInfo();
    // let userInfo = this.$store.state.userInfo;
    let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
    console.log(userInfo)
    this.isShow(userInfo);
  },
  mounted() {
    let _this = this;
    this.gethigherMenu();
    this.form.setFieldsValue({
      sortCode: 1
    });
    window.Event.$on("menuLeft", val => {
      _this.menuLeft = val;
      if (_this.menuLeft != "menuDeaDolour") {
        _this.TableAdmin='TableAdmin';
        _this.butAdmin='butAdmin';
        _this.TableButSave='TableButSave';
        _this.TableButReset='TableButReset';
      } else if (_this.menuLeft == "menuDeaDolour") {
        _this.TableAdmin='TableAdmin1';
        _this.butAdmin='butAdmin1';
        _this.TableButSave='TableButSave1';
        _this.TableButReset='TableButReset1';
      }
    });
    // _this.menuLeft1 = _this.$store.state.menuLeft;
    _this.menuLeft1 = sessionStorage.getItem('menuLeft')
    if (_this.menuLeft1 != "menuDeaDolour") {
      _this.TableAdmin='TableAdmin';
      _this.butAdmin='butAdmin';
      _this.TableButSave='TableButSave';
        _this.TableButReset='TableButReset';
    } else if (_this.menuLeft1 == "menuDeaDolour") {
      _this.TableAdmin='TableAdmin1';
      _this.butAdmin='butAdmin1';
      _this.TableButSave='TableButSave1';
        _this.TableButReset='TableButReset1';
    }
  },
  methods: {
    isShow(userInfo) {
      if (userInfo.permissions.includes("cf:sys:menu:add")) {
        this.addShow = true;
      }
      if (userInfo.permissions.includes("cf:sys:menu:remove")) {
        this.delShow = true;
      }
      if (userInfo.permissions.includes("cf:sys:menu:edit")) {
        this.editShow = true;
      }
    },
    addMenu() {
      this.form.resetFields();
      this.addVisible = true;
    },
    getMenuInfo() {
      let _this = this;
      _this.Loading = true;
      api.menuGetList().then(res => {
        _this.Loading = false;
        if (res.code == 200) {
          _this.data = res.data;
          console.log(_this.data);
        }
      });
    },
    Delete(menuId) {
      let _this = this;
      api.menuRemove(null, menuId).then(res => {
        if (res.code == 200 && res.data == true) {
          this.$message.success("删除成功");
          this.getMenuInfo();
        } else {
          this.$message.error("删除失败");
          this.getMenuInfo();
        }
      });
    },
    edit(xqId) {
      this.xqId = xqId;
      this.editVisible = true;
      this.getInfo(xqId)
    },

    getInfo(xqId) {
      let _this = this;
      api.menuGetInfo(null,xqId).then(res=>{
        if(res.code == 200) {
          let arr1 = []
          if(res.data.parentId != null) {
            arr1.push(res.data.parentId)
            api.menuGetInfo(null,res.data.parentId).then(res1=>{
              if(res1.data.parentId != null) {
                arr1.unshift(res1.data.parentId)
              }
            })
          }else {
            arr1 = null
          }
          if(res.data.parentId == '') {
            arr1 = null
          }
          let strPerms = '';
          strPerms= res.data.perms
          _this.$nextTick(()=>{
            _this.form.setFieldsValue({
              menuType: res.data.menuType,
              menuName: res.data.menuName,
              path: res.data.path.substr(1),
              sortCode: res.data.sortCode,
              perms: strPerms,
              residence:arr1
            });
          })

        }
      })
    },

    addReturnReset() {
      this.form.resetFields();
    },
    shadowMousemove() {
      this.permsShow = true;
    },
    shadowMouseout() {
      this.permsShow = false;
    },
    gethigherMenu() {
      let _this = this;
      api.menuGetList().then(res => {
        if (res.code == 200) {
          _this.higherMenu = res.data;

          console.log(_this.higherMenu)
        }
      });
    },
    onChange(value) {
      console.log("changed", value);
    },
    handleNumberChange(value) {
      this.value = value
    },
    closeAddRole() {
      let _this = this;
      _this.form.validateFieldsAndScroll((err, values) => {
        if (values.menuType == 3) {
          let parentId1 = values.residence[values.residence.length - 1];
          api.menuGetInfo(null, parentId1).then(res => {
            console.log(res);
            let addMenu = {};
            addMenu.menuName = values.menuName;
            addMenu.path = "/" + values.path;
            addMenu.sortCode = values.sortCode;
            addMenu.menuType = values.menuType;
            addMenu.perms = values.perms;
            if (values.residence != undefined) {
              addMenu.parentId = values.residence[values.residence.length - 1];
            }
            if (!err) {
              api.menuAdd(null, addMenu).then(res1 => {
                if (res1.code == 200) {
                  _this.$message.success("添加成功");
                  // 关闭对话框
                  _this.addVisible = false;
                  // 重新执行一遍 在页面初始化加载时的语句，为了刷新数据
                  this.getMenuInfo();
                }else {
                  _this.$message.error("添加失败");
                  // 关闭对话框
                  _this.addVisible = false;
                  // 重新执行一遍 在页面初始化加载时的语句，为了刷新数据
                  this.getMenuInfo();
                }
              });
            }
          });
        } else {
          let addMenu = {};
          addMenu.menuName = values.menuName;
          addMenu.path = "/" + values.path;
          addMenu.sortCode = values.sortCode;
          addMenu.menuType = values.menuType;
          addMenu.perms = values.perms;
          if (values.residence != undefined) {
            addMenu.parentId = values.residence[values.residence.length - 1];
          }
          if (!err) {
            api.menuAdd(null, addMenu).then(res1 => {
              if (res1.code == 200) {
                  _this.$message.success("添加成功");
                  // 关闭对话框
                  _this.addVisible = false;
                  // 重新执行一遍 在页面初始化加载时的语句，为了刷新数据
                  this.getMenuInfo();
                }else {
                  _this.$message.error("添加失败");
                  // 关闭对话框
                  _this.addVisible = false;
                  // 重新执行一遍 在页面初始化加载时的语句，为了刷新数据
                  this.getMenuInfo();
                }
            });
          }
        }
      });
    },
    closeEditRole() {
      let _this = this;
      _this.form.validateFieldsAndScroll((err, values) => {
        if(values.menuType == 3) {
          let parentId1 = values.residence[values.residence.length - 1];
          let editMenu = {}
          editMenu.id = _this.xqId;
          editMenu.menuName = values.menuName;
          editMenu.path = "/" + values.path;
          editMenu.sortCode = values.sortCode;
          editMenu.menuType = values.menuType;
          editMenu.perms = values.perms;
          if(values.residence[values.residence.length - 1] != '') {
            //editMenu.parentId = _this.parentIds[0];
            editMenu.parentId = values.residence[values.residence.length - 1];
          }else {
            editMenu.parentId = '';
          }
          if (!err) {
            api.menuEdit(null, editMenu).then(res1 => {
              if (res1.code == 200) {
                _this.$message.success("编辑成功");
                // 关闭对话框
                _this.editVisible = false;
                // 重新执行一遍 在页面初始化加载时的语句，为了刷新数据
                this.getMenuInfo();
              }else {
                _this.$message.error("编辑失败");
                // 关闭对话框
                _this.editVisible = false;
                // 重新执行一遍 在页面初始化加载时的语句，为了刷新数据
                this.getMenuInfo();
              }
            });
          }
        }else {
          let editMenu = {}
          editMenu.id = _this.xqId;
          editMenu.menuName = values.menuName;
          editMenu.path = "/" + values.path;
          editMenu.sortCode = values.sortCode;
          editMenu.menuType = values.menuType;
          editMenu.perms = values.perms;
          if(_this.parentIds.length != 0) {
            editMenu.parentId = _this.parentIds[0];
          }else {
            editMenu.parentId = '';
          }
          if (!err) {
            api.menuEdit(null, editMenu).then(res1 => {
              if (res1.code == 200) {
                _this.$message.success("编辑成功");
                // 关闭对话框
                _this.editVisible = false;
                // 重新执行一遍 在页面初始化加载时的语句，为了刷新数据
                this.getMenuInfo();
              }else {
                _this.$message.error("编辑失败");
                // 关闭对话框
                _this.editVisible = false;
                // 重新执行一遍 在页面初始化加载时的语句，为了刷新数据
                this.getMenuInfo();
              }
            });
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.whole {
  width: 100%;
  height: 100%;
  position: relative;
  .Loading {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .crumbs {
    display: flex;
    padding-left: 31px;
    margin-top: 14px;
    a,
    area,
    button,
    [role="button"],
    input:not([type="range"]),
    label,
    select,
    summary,
    textarea,
    .ant-breadcrumb {
      font-family: MicrosoftYaHei;
      font-size: 18px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #4d4d4d;
    }
    .ant-breadcrumb > span:last-child a {
      font-family: MicrosoftYaHei;
      font-size: 18px;
      font-weight: normal;
      letter-spacing: 0px;
      color: #1e7eff;
    }
  }
  .jiange {
    display: inline-block;
    width: 10px;
  }
  .menuTable {
    margin-left: 25px;
    width: 1560px;
    background: #ffffff;
    border: 1px solid #c4d7e1;
    border-radius: 6px;
  }
  .addUser {
    width: 80%;
    display: flex;
    justify-content: flex-start;
    margin: 10px 0;
    margin-left: 30px;
    .userAbut {
      width: 120px;
      height: 36px;
      border-radius: 30px;
      background-color: #0078b5;
      font-size: 17px;
    }
  }
  .comAddUser {
    position: absolute;
    left: 10%;
    top: 20px;
  }
  .aModalMenu,.aModalMenu1 {
    .addForm {
      margin-top: 20px;
      position: relative;
      .surName {
        display: flex;
        justify-content: flex-end;
      }
      .menuType {
        float: left;
      }
      .permsTs {
        position: absolute;
        right: 10px;
        bottom: 90px;
        cursor: pointer;
      }
      .permsCase {
        width: 200px;
        height: 200px;
        position: absolute;
        right: 0px;
        bottom: -120px;
        z-index: 10;
        border-radius: 5px;
        border: 1px solid #ddd;
        background: #fff;
        display: flex;
        flex-direction: column;
        span {
          height: 30px;
          width: 100%;
          border-bottom: 1px #ddd dashed;
          display: flex;
          justify-content: flex-start;
          font-size: 10px;
          line-height: 30px;
          padding: 0 10px;
        }
      }
    }
    .butSave {
      width: 94px;
      height: 30px;
      border-radius: 30px;
      background-color: #0078b5;
      font-size: 16px;
      color: #fff;
      margin-right: 40px;
    }
    .butReset {
      width: 94px;
      height: 30px;
      border-radius: 30px;
      font-size: 16px;
      color: #0376b7;
      border: 1px solid #0376b7;
    }
  }
}
</style>
<style>
.TableAdmin .ant-table-thead > tr > th .ant-table-header-column {
  color: #5a77b1;
}
.TableAdmin1 .ant-table-thead > tr > th .ant-table-header-column {
  color: #238cc3;
}
.TableAdmin .ant-table-thead > tr > th {
  background-color: #fff !important;
  border-bottom: 1px solid #5c78aa !important;
  color: #5a77b1 !important;
  font-size: 16px !important;
  font-weight: bold !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}
.TableAdmin1 .ant-table-thead > tr > th {
  background-color: #fff !important;
  border-bottom: 1px solid #238cc3 !important;
  color: #238cc3 !important;
  font-size: 16px !important;
  font-weight: bold !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}
.menuTable {
  position: relative !important;
}
.aModalMenu .ant-form-item-label,
.aModalMenu1 .ant-form-item-label {
  display: flex !important;
  width: 80px !important;
}
.aModalMenu .ant-input,
.aModalMenu1 .ant-input {
  width: 360px !important;
}
.aModalMenu .ant-form-item-control,
.aModalMenu1 .ant-form-item-control {
  width: 360px !important;
}
.aModalMenu .ant-row.ant-form-item,
.aModalMenu1 .ant-row.ant-form-item {
  margin-bottom: 0 !important;
  height: 60px !important;
}
.aModalMenu .ant-cascader-picker-label,
.aModalMenu1 .ant-cascader-picker-label {
  display: flex !important;
}
.aModalMenu .ant-modal-content,.aModalMenu1 .ant-modal-content {
  width: 500px !important;
  box-shadow: 0px 0px 20px 0px rgba(0, 120, 182, 0.6) !important;
}
.aModalMenu .ant-modal-body,.aModalMenu1 .ant-modal-body {
  padding: 0 !important;
  margin-left: 30px !important;
}
</style>
